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Introduzione 


Cosa è l'architettura dell'informazione? Architettura alude alla sua funzione di 
metafora con la funzione di portare i principi del design e dell'architettura nel 
paesaggio digitale. Informazione è invece l'ambito di intervento (oramai 
esclusivamente e prettamente digitale) in cui si sviluppa la a combinazione di 
organizzazione, categorizzazione ed ottimizzazione degli schemi di navigazione 
al fine di navigare tra le informazioni e cercare le informazioni nella miglior 
maniera possibile. 

Un'organizzazione della conoscenza frutto di design strutturale di uno spazio 
informativo atto a facilitare l'esecuzione dei compiti e 
l'accesso intuitivo ai contenuti attraverso una vera e propria ecologia 
dell'informazione dove al centro vi è l'approfondimento degli aspetti di usabilità 
e visibilità secondo un criterio di design user oriented. 

Da una parte l'organzizazione di contenuti attraverso lo studio e la selezione dei 
contenut attraverso thesauri (vocabolari) complessi e dall'altra capacità di 
sperimentazione ma anche di ascolto di quelli che sono le esigenze dell'utenza 
finale da verificare tramite ragionati test di usabilità. 

Stiamo parlando dunque di trasmissione di senso e significato (utile) in un 
ambito comunicativo interattivo come lo è propriamente quello digitale con 
principi e procedure di intervento che peraltro possono essere riprodotti anche al 
di fuori dell'ambito informatico. 

Information design ma anche, necessariamente visual design essendo 
l'informazione sempre più riconducibile all'ambito multimediale (senza 
dimenticare qundi sua maestà audio, re di tutte le nostre emozioni più 
profonde...). 

Il testo può essere liberamente reperibile e condivisibile dai repository di 
Archive.org e si può leggere nella sua formato in PDF su carta o su qualsiasi 
computer-software capace di interpretare il diffusissimo Portable Document 
Format oppure in formato ePub su qualsiasi lettore di ebook. Lo specifico 
formato multimediale epub3 permette su alcuni software multi-piattaforma come 
Readium oppure Gitden di usufruire anche dei contributi audio e video inclusi 
mentre per i link di approfondimento è necessario usufruire della connessione ad 
Internet. 

Tutte le risorse indicate in questo ipertesto possono essere monitorate nelle loro 
versioni aggiornate sul sito Web http://www.infoaccessibile.com dove è possibile 
trovare anche altri riferimenti e strumenti per approfondire le tematiche 



affrontate (questo testo è volutamente sintetico al solo scopo di sottolineare 
aspetti e procedure essenziali in materia) mentre sul blog 
https://scaccoalweb.wordpress.com è possibile seguire delle riflessioni in 
continuo aggiornamento sulle tematiche trattate. 

A volte nel testo viene utilizzata della terminologia tecnica e, soprattutto in caso 
di primo utilizzo, viene preceduta dal segno esclamativo ! ed evidenziata in 
grassetto: Iparole chiave Abracadabra in ossequio ad una mia teoria 
http://neural.it/it/2015/12/abracadabra-a-query-is-not-a-query/ di utilizzo e 
valorizzazione di parole e concetti particolarmente strategici nella ! UX digitale, 
facilmente trovabili e quindi usabili per la loro stessa essenza semantica. 

La scelta di privilegiare formati e linguaggi allo stesso tempo open-source e 
standard va incontro ad una mia personale convinzione - maturata grazie al 
confronto con attivisti del software libero e della libera condivisione della 
conoscenza - di offrire a chi ancora deve crescere e studiare strumenti versatili 
ma non particolarmente onerosi (quanto meno sotto il profilo economico) ed al 
tempo stesso di abituarsi a lavorare per produrre contenuti e manufatti (pur 
digitali) orientati ad una conservazione a lungo termine ed ad una loro libera 
condivisione. 




Preparazione al corso: linguaggi, risorse di 
riferimento e strumenti utili (installazione) 

Testi Consigliati 

Material Design Guidelines. Google. 

Raskin J., Interfacce a misura d'uomo, Apogeo. 

UX Design, ebook by UXPin. 

Articoli e news di approfondimento del Nielsen Norman Group. 

Manuale per la progettazione digitale. A cura di Gabriele Lunati e Giovanni 
Bergamin (Regione Toscana). 

Information Architecture: For thè Web and Beyond Information Architecture: 
For thè Web and Beyond di Rosenfled, Morville, Arango. 

Pervasive Information ArchitecturePervasive Information Architecture: 
Designing Cross-Channel User Experiences di A. Resmini e L. Rosati. 

Architettura dell'informazione Architettura dell’informazione: Trovabiltà dagli 
oggetti quotidiani al Web di L. Rosati. 

Krug S. (2010). Usabilità. Individuare e risolvere i problemi. Tecniche Nuove. 

Bindi Y. (2000). Language design: guida all’usabilità delle parole per 
professionisti della comunicazione. Apogeo. 

Architettura della Comunicazione di Badaloni Federico. 

Comunicare la User Experience di Maria Cristina Lavazza. 

Software o servizi online utili di 
riferimento 

Iscriversi ai seguenti servizi online od installare i seguenti software solo se non 
si sta utilizzando equivalenti alternative già in proprio possesso. Se la chiavetta 
USB che ho portato in classe non funziona oppure non avete a disposizione un 
device con connessione Universali Serial Bus allora scaricate da Internet ed 



installate i seguenti software ! Open Source che vi saranno utili per il 
proseguimento del corso... 

Gravit 

https://designer.io 

https://gravit.io 

Gravit è sia un servizio online che un software multi-piattaforma abbastanza 
intuitivo e potente per il design di interfacce digitali. 

Libre Office 

https://it.libreoffice.org 

Libre Office deriva da Open Office ed è un ottimo strumento per editare svariate 
tipologie di documenti in formato office (pdf compresi e tutto ciò che potete 
immaginare normalmente realizzato con Word-PowerPoint-Excel-eccetera). 
Risulta particolarmente utile in fase di scrittura contenuti testuali, per 
correggergli ortograficamente in maniera agevole e per strutturarli in maniera 
corretta al fine di esportarli in altri formati come ad esempio per il formato ePub 
grazie ad estensioni quali Writer2Html 
https://extensions.libreoffice.org/extensions/writer2xhtml 

Bluefish 

http://bluefish.openoffice.nl è un editor open-source multipiattaforma per 
linguaggi web old-school ma proprio per questo molto utile soprattutto per chi si 
approccia per la prima volta all'editing di html css o altri linguaggi utili per il 
Web. 

MockFlow 

https://www.mockflow.com 

Ambiente di sviluppo e prototipazione per app (necessità di flash). 

inVISION 

https://www.invisionapp.com 

Social Network per la condivisione a livello internazionale di prototipi di design 
digitale. 

Calibre 

https://calibre-ebook.com 

Gestore ma anche lettore e convertitore di formati ebook. 

Sigil 










https://sigil-ebook.com 

Editor ePub 

Audacity 

https://www.audacityteam.org 

Editor per file Audio 

Gimp 

https://www.gimp.org 

Software per la manipolazione di immagini 

Inkscape 

https://inkscape.org 
Editor grafico vettoriale 

Screaming Frog SEO Spider 

https://www.screamingfrog.co.uk/seo-spider/ 

Desktop website crawler and auditor for PC, Mac or Linux which spiders 
websites’ links, images, CSS, script and apps like a search engine to evaluate 
onsite SEO 

Vivaldi Browser 

http s : //vivaldi. com 

Browser con sistema immediato di visualizzazione meta-dati 

AVVERTENZA PER L’ESERCITAZIONE 

Questa dell’installazione dei software e dell’iscrizione ai servizi online indicati 
UNA ESERCITAZIONE e va affrontata con l’impegno che merita 
un’esercitazione, nello specifico bisogna porre attenzione a: 

• individuare l’estensione-formato file di competenza per il proprio sistema 
operativo; 

• obbligatoriamente leggere (readme) le istruzioni che eventualmente su 
qualche ! sistema operativo indicano procedure eventualmente 
complesse di installazione del software ivi compreso eventuali librerie- 
dipendenze (diciamo software aggiuntivo) eventualmente necessario per 
l’installazione; 

• installare eventuali pacchetti supplementari indicati in fase di installazione 
per poter usufruire di documentazione di supporto (help) oppure di 
interfacce scritte nella propria lingua-cultura di appartenenza; 








• nel caso di sottoscrizioni di servizi online fare attenzione ai requisiti di 
iscrizione (anche se gratuiti) ed in particolare alla regolamentazione 
inerente la gestione e conservazione dell’account attivato (compresa 
eventuale possibilità di eliminazione od esportazione dati prodotti in 
svariati formati) e soprattutto le regole inerenti input e condivisione dei 
materiali immessi nella piattaforma. 



I linguaggi del Web come matrice 
comune del digitale 

È importante prendere dimestichezza con i linguaggi del Web perché il Web ed i 
suoi linguaggi rappresentano la vera e propria matrice di tutta la filiera della 
Comunicazione Digitale. Sulla triade di linguaggi html-css-javascript (ed affini) 
è basata la comunicazione Web resa sempre più complessa e performante dallo 
sviluppo di ! f ramewor k e CMS (Content Management Systems), ma i 
linguaggi del Web si prestano ad essere traslati in maniera flessibile per 
realizzare a sua volta app o ebook che a volte parlano proprio la stessa tipologia 
di linguaggi come nel caso delle Web App oppure degli ebook di tipo ePub. 

HTML = Struttura 

L’HyperTextual Mark-Up Language è un linguaggio fondamentale da 
padroneggiare quanto meno nei suo fondamenti perché ci permette di scrivere 
ex-novo ma ancor più spesso analizzare ed eventualmente correggere (magari 
con il supporto di qualificate risorse tecniche) molte componenti fondamentali di 
un’interfaccia quali: 

• i meta dati attraverso i ! tag title e description che concorrono in maniera 
significativa a rappresentare le interfacce su molte piattaforme di 
indicizzazione e catalogazione a partire dai motori di ricerca; 

• tutte le denominazioni dei componenti strutturali di un’interfaccia quali 
ad esempio i tag di tipo h ma soprattutto i nomi di file e di cartelle che 
concorrono in maniera significativa a indicizzare le interfacce su molte 
piattaforme quali i motori di ricerca; 

• alcune componenti di schematizzazione che, naturalmente, anch'esse 
concorrono in maniera significativa a catalogare le interfacce su molte 
piattaforme come i motori di ricerca; 

• i tag div che rappresentano in qualche maniera i singoli mattoncini- 
componenti di un’interfaccia associabili ad una determinata classe o id che 
può essere a sua volta associata ad un determinata tipologia di layout o 
funzionamento; 

• per ultimo - ma è il più importante - il tag a (anchor) che determina la 
possibilità o meno di creare collegamenti e quindi determinare la natura di 
ipertesto (ed ipermedia) delle interfacce digitali. 



Regole di scrittura 

l’HTML ha poche ma importanti regole di scrittura fra qui spicca quella di dover 
nidificare correttamente i tag - possono essere scritti uno dentro l’altro ma 
devono aprirsi e chiudere gli uni dentro gli altri senza intersecazioni errate un po’ 
come quando si doveva imparare ad includere le parentesi tonde dentro le quadre 
in un’espessione algebrica - ma soprattutto bisogna imparare che i tag 

(marcatori) possono avere degli attributi a loro volta contraddistinti da un valore 
che contribuiscono a definire funzionalità e semantica dell'elemento marcato, ad 
esempio il semplice codice: 

<a href—"http://www.html.it/">linguaggi per realizzare 
le pagine Web</a> 

mi identifica una frase ‘linguaggi per realizzare le pagine web’ che è interessata 
dall’azione del tag (marcatore) a che a sua volta ha un attributo href che a sua 
volta avendo un valore corrispondente ad http : //www .html.it mi 
determina la creazione di un hyperlink al sito web stesso. 




CSS = Layout 

I Cascading Style Sheets - fogli di stile a cascata - è una tecnica che consente di 
introdurre efficacemente ed economicamente (nel senso di razionalizzazione 
delle energie a disposizione) elementi di stile (formattazione grafica o layout). 
Una delle caratteristiche funzionali più importanti dei CSS è la cosiddetta 
ereditarietà ovvero la possibilità di cui gode l'elemento figlio di ereditare 
indicazioni di formattazione grafica dall'elemento padre. 

Regole di scrittura 

Sebbene i fogli stile siano una tecnica MOLTO complessa da padroneggiare, 
alcune sue regole base sono relativamente semplici ed il funzionamento base dei 
css è un tipo di know-how indispensabile per chiunque ha necessità di 
rapportarsi a vario livello rispetto alla progettazione Web. Le regole dei fogli 
stile si applicano a selettori e marcatori attraverso una cosiddetta dichiarazione 
di stile contenente proprietà e valori e quindi il loro funzionamento è 
inscindibile dalla marcatura di tipo html. Gli elementi a cui si applicano gli stili 
possono essere cosiddetti di blocco ovvero che si estendono per intero in 
larghezza (ad esempio come p, table,, hi e h2) oppure in linea ovvero che 
condividono la loro posizione orizzontalmente con altri elementi (ad esempio a, 
img, span o mark). Similmente ai marcatori html i fogli stile sono caratterizzati 
da selettori a cui possono essere associate delle proprietà a cui a loro volta 
possono essere associati dei valori come si può evincere dagli esempi elencati 
sopra. 

I selettori associati ad un determinato marcatore ereditano le proprietà dai 
marcatori nel quale è eventualmente nidificato attraverso regole ben precise: per 
poter attribuire con precisione determinate proprietà di formattazione grafica ai 
marcatori, gli stessi possono essere identificati in maniera univoca tramite un 
identificativo (ID) oppure accorpati in classi (CLASS). L'identificativo ID è 
particolarmente importante in quanto ad esso può essere associato non solo un 
determinato foglio stile, ma anche un punto di ancoraggio (stile attributo name ), 
una funzionalità javascript, un elemento dichiarato object oppure per 
l'identificazione di campi nel caso di estrazioni di dati per un database. 

II selettore id viene richiamato dal simbolo speciale nella dichiarazione di stile e 
si applica a un solo elemento della pagina web, il selettore class viene richiamato 
dal simbolo nella dichiarazione di stile e si può applicare a più selettori o 
marcatori associati alla relativa classe: id e class sono assegnati tramite gli 



omonimi attributi. 


CSS (similmente all'html) è un linguaggio di editing che può essere associato in 
tre maniere diverse: tramite uno stile in linea è possibile determinare lo stile di 
un singolo elemento della pagina web, con lo stile incorporato lo stile di una 
singola pagina Web mentre con lo stile collegato si può virtualmente determinare 
lo stile di un intero sito Web: l'efficienza e la comodità dei risiedono infatti 
anche nella possibilità di comandare lo stile di più elementi e di più pagine web 
facendo riferimento ad una unica regia di stile determinando un notevole 
risparmio in termini di codice e banda. 


Stile in linea 

<p style="color: white; background: black;">Sezione 
testo colore 

bianco su sfondo nero</p> 


Stile incorporato 


i. <html> <head> <title>Inserire i fogli di stile in 
un documento</title>h6 {color: red; } </head> 

<h6>marcatore html di tipo h6</h6> 

<h6>marcatore html di tipo h6</h6> 

<body> 

marcatore html di tipo h6 

marcatore html di tipo h6 

Stile collegato 

<html> <head> <title>Inserire i fogli di stile in 
un documento come file di testo collegato di tipo 
css</title><link href="../css/base.css" 
rel="stylesheet"x/head> <body> 

Come risultato si ereditano tutte le dichiarazioni di stile presenti nel foglio 
di stile denominato base.css da ricercare nella cartella (dir) css 



JavaScript = Funzionalità 

È un linguaggio di ! scripting che deve il suo nome alla sua sintassi simile 
quella del linguaggio Java comunemente utilizzato per introdurre funzionalità 
nei siti Web, ma ultimamente reso popolare per la realizzazione di app per più 
sistemi operativi in sinergia, ovviamente con i linguaggi html e css. 

Se la conoscenza di questo linguaggio di programmazione travalica le 
conoscenze di chi scrive, ma anche le finalità di questo testo didattico è 
sufficiente saper riconoscere l’eventuale inclusione di un codice javascript nel 
codice sorgente di una pagina Web - alias interfaccia digitale - individuando la 
stringa... 

<script type="text/javascript"> 

all’interno della quale, come vedremo più avanti, è possibile associare 
funzionalità, ad esempio e relativamente alle finalità di questo testo didattico, 
finalizzate a monitorare il comportamento dell’utenza finale su una qualsiasi 
interfaccia digitale. 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) una pagina di 
scrittura di prova dei linguaggi html-css-javascript 
https://codepen.io/sandropaganotti/pen/JvepK/ modificando contenuto, e 
variando ed aggiungendo codice di vario tipo: descrivi ed allega il risultato 
ottenuto, prova inoltre ad utilizzare Atom o software a tuo piacimento 
equivalente provando a modificare file html-css-javascript e verificando tramite 
browser l’effetto delle modifiche apportate. 




I Content Management System (CMS) per il Web 
come perfetti ecosistema informativo per 
sperimentazioni e prototipoazioni di architetture 
informative (set-up) 

La realizzazione operativa di un’interfaccia vera e propria dotata di tutte le 
funzionalità e quindi da testare sotto il profilo delle esigenze di usabilità 
dell'utente finale può essere risolta grazie alle funzioni dei linguaggi del Web, le 
sue applicazioni e ancor più i framework e i content management System che sui 
linguaggi del Web sono basati. 

I vantaggi di un CMS Online 

La possibilità di utilizzare un Content Management System per montare la 
grafica su un’idea di interfaccia per poi farla evolvere a livello di prototipo 
(sistema interattivo e pienamente operativo in tutte le sue funzioni pur nella sua 
natura alfa di prima versione ) è una possibilità che ci offre il sistema Web 
offrendoci al tempo stesso - per la sua stessa natura ipertestuale - di metterci in 
relazione con il nostro target di riferimento (o audience-pubblico che dir si 
voglia) e quindi poterne testare l’efficacia. I CMS sono sempre più complessi e 
ricchi di funzione, ma al tempo stesso relativamente semplici da utilizzare: lo 
vediamo utilizzando come esempio uno fra i più apprezzati ed utilizzati al 
mondo... 

Wordpress 

Rispetto all’idea di montare della grafica su un wireframe e farlo evolvere a 
livello di mockup e quindi renderlo interattivo per poterlo definire a pieno titolo 
un prototipo, WordPress è una soluzione open-source - che può essere utilizzata 
sia come free ! hosting su un ! sotto-dominio di https://it.wordpress.com 
(limitato e ospitante pubblicità di terze parti) sia installata su un proprio server 
da https://it.wordpress.org 

Grafica = Temi 

Lo strumento principale offerto da Wordpress per far evolvere il proprio 
wireframe alla natura grafica-comunicativa di Mockup è sicuramente il 
cosiddetto tema ( theme in inglese). Anche se il Web presenta dei limiti di 
rappresentazione (pochi in realtà) è veramente enorme l’offerta di template 




ovvero modelli grafici di partenza che possono essere scaricati da 
https://it.wordpress.org/themes/ oppure selezionabili per il proprio sotto-dominio 
da https://wordpress.com/themes/ 


WordPress.com themes 
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La scelta è veramente ampia (anche fra quelli gratuiti-free) potendo filtrare la 
propria scelta rispetto alla tematica trattata, meccanismi di navigazione preferiti, 
tipologie di layout, numeri ed organizzazione delle colonne (ed ovviamente tutto 
può essere adattabile in ottica responsive ), mood grafico da trasmettere. 

Per poter scegliere però consapevolmente è necessario conoscere alcune logiche 
di strutturazione contenuti adottate da WordPress e peraltro replicate similmente 
su qualsiasi cms: i contenuti si dividono fra pagine fisse perlopiù utilizzate nei 
vari menù e post che invece sono articoli con in evidenza la data di realizzazione 
in quanto hanno una funzione principale comunicativa di storytelling. I menù 
sono ampiamente configurabili e quando rappresentati sulla sezione in verticale 
spesso affiancati da possibili innesti informativi o funzionali speciali denominati 
widget. Manco a dirlo tutto può essere personalizzabile salvo conoscere la logica 
di editing html-css. 

Funzionalità = Plugin 

I plugin (estensioni) sono delle funzionalità aggiuntive che possono essere 
aggiunte sul proprio cms ed anche in questo caso l’offerta è limitata 
all’essenziale per la versione free di https://it.wordpress.com/install-plugins/ 
mentre è veramente estesa su https://it.wordpress.org/plugins/ 
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Le funzionalità innestabili sono tra le più varie e spaziano dalle statistiche alle 
procedure di ottimizzazione per i motori di ricerca, dalle questioni di sicurezza e 
backup alla possibilità di mettere in evidenza moduli di contatto oppure 
migliorare la presentazione grafica di post ed immagini. 






Ispirarsi a case history di successo 

Una buona regola può essere quella di ispirarsi a case history di successo perché 
possiamo pensare di avere l’idea più originale del mondo a livello di design di 
interfaccia ma è più saggio rimanere umili e vedere cosa è stato realizzato e cosa 
ha avuto successo nel nostro stesso settore d’intervento prima di cominciare a 
progettare non fosse altro per trovare ispirazioni e testare la bontà delle nostre 
(ispirazioni). 

Studiare i propri competitor 

Considerate che, magari, nel medesimo settore di intervento c’è chi ha già 
investito creatività, tempo e denaro per raggiungere gli stessi obiettivi ed allora 
perché non studiare la propria concorrenza? Un atteggiamento umile ed analitico 
può far risparmiare tempo e denaro salvo riservarsi la libertà di trarre ispirazioni 
ed adattare intuizioni alla propria creatività e capacità di progettazione. 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) le tue scelte 
progettuali definitive circa l’ipotesi progettuale di una bozza di architettura 
dell'informazione grazie ai linguaggi del Web ed all'adozione di un CMS 
(Content Managment System). 



Procedure e strumenti di Personas Design 
(realizzazioni pratiche) 

Un’architettura informativa deve essere "pensata" necessariamente rispetto ad un 
obiettivo comunicativo e ad un target di riferimento. Per individuare la possibile 
audience su cui impattare con la nostra attività comunicativa anche in termini 
quantitativi è possibile utilizzare le due opportunità di mediazione tecnologico- 
comunicativa più utilizzate al mondo che sono i ! motori di ricerca ed i ! social 
network. 

In definitiva, quello che andiamo a svolgere è un'operazione di ! personas design 
ovvero cercare di individuare caratteristiche e consistenza numerica delle per¬ 
sone che andiamo ad intercettare con la nostra attività comunciativa: nell'antica 
grecia gli attori sul palco indossavano delle maschere non solo per trasfigurarsi 
ma anche per amplificare (per) il suono della propria voce e noi stiamo per 
indossare le maschere dei motori di ricerca e dei social network per vedere come 
raggiungere più persone possibili ma soprattutto quelle "giuste". Tutto ciò è 
possibile utilizzando strumenti di ricerca speciali così come simulando 
campagne di inserzioni commerciali sulle varie piattaforme. 

Social Network 

Ogni Social Network è pensato per raggiungere un certa tipologia di utenza 
suddivisa fra classi di genere, età, interessi eccetera. Selezionare un social 
network per cercare di capire caratteristiche e rilievo quantitativo di una certa 
tipologia di target significa prendere in considerazione un ambito specifico di 
ricerca. 
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Da un punto di vista di impatto generazionale bisogna prendere atto che 
Instagram sta soppiantando Facebook nelle nuove generazioni mentre a livello di 
diffusione internazionale è assolutamente prendere coscienza della 
predominanza di alcuni social come VK oppure QQ ad Oriente. 
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Linkedin 


Linkedin è un social network diffuso in tutto il mondo e particolarmente adatto 
per un tipo di comunicazione !B2B (fra professionisti ovvero Business To 
Business). 


Help Center | Blog 


Linkedfffl Marketing Solutions Advertising Company Pages Resources CustomerStories | Create ad | 


Generate leads, drive website traffic, 
and build brand awareness 

Marketing on Linkedln helpsyou engagé a community of professionaisto 
drive actions that are relevant to your business. 


550M 4 of 5 #1 

PROFESSIONALS MEMBERS PLATFORM 

on Linkedln drive business decisions, for lead generation 2 


,DemandWave 2017 state of B2B Digital Marketing Report; jLinkedln Audience 360 study 



La targetizzazione consentita da Linkedin è molto raffinata e consente di 
distinguere e selezionare le persone da raggiungere in base al loro titolo di 
studio, ruolo professionale, esperienze, competenze acquisite, ambito di 
intervento, localizzazione, eccetera. 
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Target by traits likejob title, company name, industry, and more. 
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Facebook 


Le stesse opportunità offerte da Linkedin in fase di simulazione annuncio 
pubblicitario si ritrovano anche su Facebook con la differenza che quest'ultimo 
un network molto più ampio ed infatti adatto anche a programmazioni 
d'intervento e di analisi !B2C ovvero Business To Consumer e quindi 
espandendo le possibilità di targetizzazione a classi di genere, interessi, 
comportamenti, connessione, eccetera. 


facebook business | facebook Instatemi O Messenger 


Inserzioni Pagine Ispirazione Storie di successo Notizie 

Opzioni di targetizzazione di Facebook 


■ Luogo: raggiungi le persone in base al Paese, alla regione o 
alla provincia, alla città attuale o al codice postale. 


■ Età e genere: restringi il pubblico in base a età e genere. 

■ Lingua: definisci come destinatari delle inserzioni le persone 
che parlano lingue specifiche. 


■ Interessi: raggiungi le persone in base agli interessi che 
hanno condiviso, alle loro attività, alle Pagine a cui hanno 
messo "Mi piace" su Facebook e ad argomenti strettamente 
correlati. 

■ Comportamenti: raggiungi le persone in base alle loro 
abitudini o intenzioni di acquisto, all'uso dei dispositivi e molto 
altro. 

■ Connessioni: raggiungi le persone connesse alla Pagina 
Facebook, all'app o all'evento della tua azienda o i loro amici. 

■ Pubblico personalizzato: crea il tuo pubblico usando i pixel, 
gli indirizzi e-mail, i numeri di telefono o gli ID utente delle app. 


Pubblico simile: raggiungi le persone simili al tuo pubblico. 






Motori di Ricerca 


I motori di ricerca hanno al pari dei social network molti strumenti per 
individuare il proprio target di riferimento ed alcuni liberamente accessibili 
come Markt Finder di Google. 


Market Finder 

Here are your top market suggestions 

We've found markets that best match your business 
based on thè categories you have provided. 
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L'analisi del proprio target attraverso le procedure di !SEM Search Engine 
Marketing ovvero attraverso gli strumenti che predispongono od anche solo 
simulano la realizzazione e diffusione di annunci pubblicitari offrono procedure 
simili ai social ma danno il meglio di sé per quanto riguarda lo studio delle 
parole del target di riferimento e non le connessioni identitarie e questo perché 
i social lavorano con le identità ed i motori con le parole! (non a caso i traduttori 
automatici si trovano su tutti i motori di rierca e non sui social...). 
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Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer) un prospetto sul 
possibile target di riferimento per l'architettura informativa in sviluppo e relativi 
confini dimensionali. 



Principi di connessioni, navigabilità ed usabilità in 
ottica UX design 

Il padre dell'usabilità moderna, Nielsen, ce lo ricorda spesso attraverso gli 
articoli del suo gruppo https://www.nngroup.com/articles/ che qualsiasi progetto 
di costruzione di un'architettura volto alla progettazione ex-novo o restyling di 
un'interfaccia deve per prima cosa individuare il relativo obiettivo comunicativo 
e target di riferimento. 

Obiettivo comunicativo 

L’obiettivo comunicativo indica perché si realizza un’interfaccia (i perché e le 
domande fanno sempre bene a un progettista di qualsivoglia interfaccia) e le 
finalità di un’interfaccia sono uno degli aspetti che influenzano le linee guida di 
sviluppo progettuale del design digitale in tutti i suoi aspetti e per tutte le sue 
componenti, principali ma anche secondarie. Con la mia interfaccia devo 
narrare? Promuovere? Vendere? Istruire? E poi volendo entrare maggiormente 
nello specifico... Cosa? Come? Quando? 

Target di riferimento 

L’altro aspetto che necessariamente influenza le linee guida di sviluppo 
progettuale del design digitale in essere è l’individuazione del target di 
riferimento ovvero... per CHI stiamo sviluppando la nostra interfaccia digitale? 
Ovviamente tutto è relativo rispetto al differente target di riferimento individuato 
che potrebbe avere varianti significative come quelle inerenti l’età, il genere, il 
livello di istruzione, lingua e cultura di provenienza eccetera. 



Esempio 

Gli esempi come al solito valgono molto più di mille parole ed allora ecco a voi 
il fantastico video del The Tokyo Shimbun "Share thè Newspaper with 
Children... 


00 : 00 / 00:00 


Il problema dei quotidiani su carta di non saper intercettare le giovanissime 
generazioni viene affrontato da un quotidiano giapponese in maniera 
assolutamente creativa realizzando una serie di realtà aumentata (AR) che il 
giovane lettore giapponese può visualizzare inquadrando gli articoli del 
quotidiano che sono opportunamente supportati da una trascrizione semplificata 
adeguata per grammatica e linguaggio ad un bambimo: la scrittura semplificata 
hirigana unitamente a sintesi adeguate ed animazioni divertenti rendono la 
lettura di un quotidiano un’esperienza appagante anche per un lettore di nove o 
dieci anni. In questa maniera con un prodotto cartaceo traslato al digitale (con 
una strategia dunque cross-mediale ) si raggiunge l’obiettivo comunicativo di 
informare coinvolgendo più target di riferimento. 

















È una questione di Usabilità 

Il tutto gira intorno al concetto di usabilità ovvero a quanto può essere 
performante la nostra interfaccia nel farsi utilizzare da uno determinato target di 
riferimento, rispetto ad un obiettivo comunicativo di carattere generale ma anche 
relativamente a determinati compiti (task) specifici che la stessa utenza può 
svolgere sulla nostra interfaccia come trovare un’informazione, contattare un 
helpdesk, valutare o acquistare un prodotto o un servizio, apprendere un 
determinato know-how. 

Bisogna, più in generale, riuscire nel difficile intento di conquistare l'utenza 
finale in termini di apprezzamento ed attenzione ed imporre il proprio 
linguaggio comunicativo e la propria logica funzionale di utilizzo 
dell’interfaccia stessa. 

Per far questo bisogna però essere coscienti di quali sono gli accorgimenti 
necessari per: 

• evitare di perdere l’utenza finale che, statisticamente, impiega due-tre 
secondi prima di decidere se continuare o meno nel provare l’interfaccia 
digitale che ha approcciato; 

• conoscere le regole generali di usabilità di una qualsiasi interfaccia digitale. 
È necessario sempre sapersi calare nei panni dell'utente finale (target) e 
prevedere quali potrebbero essere gli elementi critici che potrebbero portare il 
nostro utente finale ad abbandonare subito la nostra interfaccia, in particolare 
evitando: 

• contenuti non strutturati logicamente e conseguenti meccanismi di 
navigazione inefficaci (vale sempre la regola che in tre click-passaggi 
devono poter svolgere qualsiasi funzione specifica o arrivare ad acquisire 
qualsiasi informazione specifica contenuta nell’interfaccia); 

• troppa pubblicità o pubblicità eccessivamente invasiva; 

• audio o video che partano automaticamente senza possibilità di controllo a 
posteriori; 

• meccanismi di registrazione obbligatori posizionati all’inizio 
dell’esperienza utente; 

• contenuto e grafica noiosa o scarsamente leggibile; 

• contenuti non aggiornati. 

Viceversa è sempre importante tenere a mente le principali euristiche di Nielsen 



(padre moderno dell’usabilità digitale) che consigliano di: 

• tenere sempre informati gli utenti su cosa sta accadendo (se, ad esempio, 
stai facendo scaricare qualcosa è opportuno far sapere all'utente quanto 
manca al completamento del download); 

• iconicamente e metaforicamente mantenere sempre una connessione logica 
con la realtà così come normalmente percepita (uno STOP ad un’azione 
potrebbe, ad esempio, essere iconicamente rappresentato da un semaforo 
rosso - problemi di accessibilità a parte); 

• far mantenere il controllo delle azioni all’utenza finale consentendo, ad 
esempio, di annullare operazioni in corso o tornare sui propri passi; 

• l’informazione e le soluzioni di design devono essere ridotte al minimo per 
non mettere in difficoltà l’utenza finale. 



Usabilità alla Google 

La filosofia di Design ideata da Google e nota come Material Design ed in 
particolare le sue linee guida https://material.io/design/guidelines- 
overview/ colloca nelle sue linee guida il principio dell’usabilità in maniera 
bizzarra: lo spalma opportunamente in tutta la guida (essendo l’usabilità il 
prerequisito del buon funzionamento di ogni componente della comunicazione 
digitale) ma crea anche un’apposita sezione Usabilità dove all’interno ci innesta 
la tematica viceversa più ampia e prioritaria dell’accessz'bz'/z'tà e quella della 
bidirezionalità ovvero l’esigenza di rappresentare correttamente l’informazione 
per quelle lingue orientate da destra verso sinistra. 

In questo paragrafo, viceversa, vedremo quali sono i consigli più interessanti 
delle Material Guidelines orientate ad una ottimale organizzazione di 
un’architettura informativa. 

Ma prima di addentrarci su alcuni consigli relativi alle opportunità di 
navigazione di un’interfaccia digitale che rappresenta l’occasione più importante 
per rendere una qualsivoglia architettura informativa (web od App) veramente 
usabile soffermiamoci su alcuni principi-base della filosofia Material Design in 
termini di usabilità... 

Filosofia touch first 

Pensiamo allo stesso nome Material scelto per queste linee guida: Big G , 
essendo molto interessato ad ottimizzare l’interazione con i dispositivi mobili 
(smartphone ed affini) , vuole promuovere un’idea di design che riesca a 
trasmettere la materialità di ciò che appare a schermo al fine di indurre in 
maniera più convinta ed appagante il gesto del touch sull’icona di turno 
apparentemente tridimensionale e che sembra dire: “toccami toccami “ e questa 
è sicuramente un’ottima impostazione di base molto cali to action. 

Semplicità e sintesi 

Testi e funzioni ridotti al minimo indispensabile nell’ottica di non aggredire e 
confondere l’utente finale, bensì proporgli pagine di atterraggio, meccanismi di 
funzionamento e percorsi più semplici possibili e percepiti anche come più user- 
friendly. 

Chiarezza e massima comprensione 

Tutto deve essere chiaro e comprensibile, l’utente finale NON deve fare nessuna 





fatica a comprendere dove si trova e cosa ha di fronte, altrimenti si corre il 
rischio di perdere l’utente stesso. 

Icone e Colori 

Sì, capisco che sia difficile accostare soprattutto il concetto di colore al concetto 
di usabilità ma l’utilizzo di icone semplici e comunicative e livelli cromatici che 
ben distinguono informazioni e funzioni sono anch’essi funzionali ad 
accompagnare l’utente verso un’esperienza lineare e logica sempre a livello di 
comprensione dell’informazione e delle funzioni a cui si trova di fronte. 



Percorsi e navigazioni 

Bisogna pensare ad organizzare le voci di menù e l’architettura 
dell’informazione più in generale della nostra interfaccia ipotizzando i diversi 
percorsi che un utente finale potrebbe intraprendere per arrivare ad 
un’informazione (od obiettivo-conversione). 

Ad esempio per trovare una canzone posso affidarmi al motore di ricerca interno 
così come indagare sui branimusicli recentemente ascoltati oppure, in maniera 
più sistematica, partire dalle collezioni generali di partenza, per poi scendere 
nelle sotto-categorie come per esempio gli album. 

Menù e chiare opportunità di navigazione 



Il menù cosiddetto hamburger ovvero rappresentato dai famosi tre trattini o 














puntini allineati in verticale è un’ottima e nota opportunità, accolta in maniera 
consapevole da tutta 1‘utenza finale come strumento di navigazione: lo stesso 
utente finale però non è detto che voglia fare lo sforzo di digitare sopra ed è per 
questa ragione che bisogna valutare bene le eventuali voci di menù 
immediatamente visibili così come gli eventuali tab che vengono messi in 
evidenza nella Homepage o da altra ! pagina di atterraggio perché a 
loro è delegata la capacità di comunicare e spiegare all’utente finale dove si 
trova, salvo poi approfondire la navigazione con gli strumenti di navigazione 
interni (menù ad hamburger compreso). 
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Chi cerca trova 

La funzione di ricerca interna è così importante - soprattutto per siti web 
complessi - ai fini di una corretta fruizione di un’interfaccia che, dove non si può 
contare su risorse tecniche interne sufficienti, può essere presa in seria 
considerazione la possibilità di utilizzare una delle varie possibilità offerte dai 
motori di ricerca - tra i quali lo stesso Google c ori https.V/cse.google. it/cse/ - per 
integrare un proprio motore di ricerca interno o custom search engine grazie ad 
un supporto tecnologico esterno. 





























Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) l'idea di 
architettura che si sta progettando o rimodellando (restyling) e come potrebbe 
essere sollecitata e rispondere efficacemente ad almeno tre diversi ipotesi-task di 
utilizzo dell’interfaccia-architettura stessa da parte dell'utenza finale. 



(A)UX Design ovvero costruire un'architettura a 
misura di entità artificiali come motori di ricerca, bot 
ed assistenti vocali (sperimentazioni) 

L'arte del ISEO Search Engine Optimization è una serie di opportunità 
complesse di organizzazione dell'informazione di un'architettura informativa in 
maniera tale che sia ben comprensibile ed indicizzabile da quelli che sono 
diventati oramai la maggioranza degli utenti dell'ecosfera digitale che sono i 
Ibot: si parla dunque di entità artificiali ed è er questo che ci può parlare di 
(A)UX Design ovvero di (Artificial) User eXperience Design. Le opportunità a 
disposizione sono innumerevoli ma le principali adottabili 

(A)UX Design per Motori di ricerca e 
indicizzatori-bot vari 

In termini di (A)UX-Design è importante strutturare un contenuto e l'interfaccia 
che lo ospita in maniera ottimizzata rispetto a tutti quei bot che in quanlche 
maniera hanno l'esigenza di intepretarla e catalogarla razionalmente anche grazie 
ad algroritmi, procedure di machine learning ed altre opportunità offerte dalla 
sempre più diffusa intelligenza artificiale. 

A tal fine è necessario seguire i seguenti accorgimenti da ritenersi indispensabili 
e senza addentrarsi nelle mille sfumature del cosiddetto Search Engine 
Optimizazion (SEP) : 

• nominare in maniera significativa ogni componenente ed elemento strutturale del sito Web, in 
ordine di importanza dominio, sottodominio, cartelle, nomi di file, nomi di immagini, tag di tipo h; 

• curare gli elementi come i meta tag e description che concorrono alla rappresentazione del 
contenuto indicizzato; 

• sia a livello di rappresentazione più ricca che di corretta indicizzazione applicare dove possibili i 
vocabolari di schematizzazione del protocollo https://schema.org . 
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Altre opportunità secondarie di 
ottimizzazione dell'informazione 


Alcune altre opportunità secondarie ma significative in tema di strutturazione, 
etichettazione, ed organzizazione dell'informazione ad uso e consumo di bot vari 
sono: 


• la realizzazione di Isitemap per l'indicizzazione repentina di news informative; 

• controllo ed ottimizzazione dei Imeta OG (Open Graph) per una corretta rappresentazione 
dell'infomazione condivisua sui social; 

• la scrittura di domande e risposte all'interno di contenuti per la rpedisposizione dei contenuti agli 

lassistenti vocali; 

• razionalizzazione e gestione di pagine di errore (404), redirect (301) ed indicazione di pagine 
canonical per differenziarle da eventuali cloni. 

Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) una prova di 
indicizzazione di un qualsiasi sito Web tramite Screaming Frog SEO SPider. 










Un'architettura dell'informazione *per tutti* ovvero 
'accessibile' (aspetti teorico-pratici) 

L’accessibilità viene spesso percepita come una problematica che riguarda 
(poche) persone disabili sottovalutando alcuni aspetti fondanti della nostre 
possibilità percettive per cui siamo tutti diversi e tutti possiamo percepire 
l'informazione (digitale) in maniera diversa. Occuparsi dell’accessibilità può 
sembrare prematuro in una fase iniziale di design digitale ma in realtà è 
importante prendere subito conoscenza delle esigenze di accessibilità perché può 
rendere il lavoro di progettazione di maggiore qualità in generale fin da subito e 
sopratutto far risparmiare interventi che, se fatti a posteriori, esigono sforzi 
operativi molto più ingenti di quanto sarebbero se venissero realizzati in fase 
iniziale. 



Percezioni 

Video 

Il famoso esperimento del vestitino bianco/oro o nero/blu ha catturato 
l’attenzione di giovani frequentanti i social e se la (possibile) spiegazione si 
fonda su diverse capacità ed interpretazioni sensoriali condizionate anche da 
fattori ambientali (colori-sfondi adiacenti e condizioni di illuminazione...) ci ha 
convinti che ebbene sì siamo diversi gli uni dagli altri dal punto di vista di 
possibile percezione ed elaborazione sensoriale e che quindi la questione 
dell’accessibilità ci riguarda (tutti nessuno escluso) ed eccome! 


f 

r f* 

k t I 1 
1 

* ‘ 1 



■ 

\ 

\ 

i 

y 

« 

«325555 




Audio 

Se l’esperimento del vestitino non vi ha convinto allora provate a livello audio a 
capire se percepite Yannv o Laurei dal video ospitato su Reddit e che dimostra 
(dai commenti ospitati) come anche la percezione audio può differire 
notevolmente... 


00 : 00 / 00:00 








Segui il cuore o "follow thè money" 

Un’altra questione sollevata dall’accessibilità spesso disattesa riguarda la doppia 
valenza: da una parte etica e dall’altra commerciale. Da un punto di vista morale, 
dovrebbe essere sentita da tutti noi l’esigenza di comunicare con qualsiasi 
persona-target indipendentemente dal tipo di limitazione sensoriale o funzionale¬ 
fisiologica che può caratterizzarla, da un punto di vista di convenienza 
commerciale, potreste riflettere su quanto siano ampiamente diffuse le disabilità 
a livello statistico ed addirittura, cinicamente parlando, in mercati importanti 
come quello degli USA (fonte https://www.includification.com f dove su una 
popolazione di 325 milioni di abitanti superano i venti milioni i veterani di 
guerra di cui un quarto affetti da una qualche forma di disabilità (senza prendere 
in considerazione i disabili civili). 


Se il tuo cuore non ti convince, “follow thè money” e ragiona in termini di 
ampliamento di mercato... 







Chi-cosa ci guadagna 
dall'accessibilità 

Non sono sole le persone disabili a trarre vantaggio di contenuti ed interfacce 
accessibili, ma è ampio lo spettro di chi può migliorare la propria esperienza 
utente rispetto ad un’interfaccia utente... proviamo a stilare un sintetico elenco: 

• noi tutti (usufruire di un’interfaccia accessibile è più appagante e comodo di 
usufruire di un’interfaccia non accessibile, così come per salire ad un 
settimo piano di un palazzo prendo l’ascensore per comodità ed efficienza 
anche se non viaggio con una sedia a rotelle); 

• le persone disabili (anche se è impossibile realizzare un’interfaccia 
perfettamente accessibile per qualsiasi tipo di disabilità con un’unica 
versione); 

• i motori di ricerca come Google (non a caso definito il più potente non 
vedente del pianeta Terra dato che privilegia i siti Web accessibili percepiti 
esattamente come li percepirebbe una persona non vedente attraverso 
l’ausilio degli ! screen- reader); 

• i social network come Facebook così come gli assistenti vocali e qualsiasi 
altra tipologia di bot interessato ad interpretare l’informazione digitale 
percepibile correttamente. 



Informazione ed interfaccia 
accessibile 


La questione dell’accessibilità è estremamente complessa: ad esempio per il Web 
esistono raccomandazioni internazionali note come le WCAG - Web Content 
Accessibility Guidelines il cui secondo livello è stato individuato come 
riferimento da molte normative nazionali (italiana compresa) così come esistono 
linee guida per ogni tipologia di settore specifico come ad esempio le fantastiche 
http://gameaccessibilityguidelines.com che ci guidano nelle raffinate soluzioni 
adottate da tutti i principali videogame commerciali per ampliare il più possibile 
la propria audience cercando di trovare soluzioni adatte alle diverse 
caratteristiche delle persone con disabilità. 

Per esempio 1’audio-video-gioco Nicolas Evmerich Linquisitore offre svariate 
soluzioni quali la pissibilità di attivare uno speciale pannello controllo dialoghi 
in cui, nella versione maggiormente accessibile pensata per le persone 
dislessiche, sono ben evidenti i controlli dell’audio-video, il focus del mouse è in 
evidenza ed il font utilizzato per i sottotitoli è decisamente più leggibile rispetto 
alla versione standard. 



In definitiva se l’interfaccia o i contenuti risultano accessibili per le diverse 
esigenze delle persone disabili allora non c’è necessità di trovare soluzioni 
supplementari specifiche che in gergo sono denominate alternative testuali. 
Alcuni aspetti di accessibilità travalicano l’utilizzo di alternative testuali ed un 
paio di esempi importanti sono: 

• evitare di assegnare in maniera esclusiva del valore comunicativo 
significativo ad un colore; 

• evitare intermittenze animazioni ovvero mutamenti repentini di oscurità e 











luce che abbiano delle caratteristiche potenzialmente pericolose per chi 
soffre di epilessia (intermittenze superiori a tre battiti al secondo costituite 
da aree significative dello schermo, ancor più gravi se comprendenti il 
colore rosso). 

Se viceversa l’interfaccia si deve presentare per motivi grafici senza essere 
dotata di informazione testuale facilmente interpretabile dagli ausili come gli 
screen-reader od altra tipologia di comunicazione facilmente interpretabile allora 
è necessario dotarsi di... 



Alternative (testuali?) 

Sono dette alternative e perlopiù alternative testuali tutte quelle soluzioni che 
facilitano la comprensione e la fruizione di un’interfaccia e di un contenuto 
digitale da parte di una persona disabile ma in realtà sono numerose le soluzioni 
redazionali e tecnologiche disponibili per rendere un’interfaccia ed il suo 
contenuto accessibile e non tutte, come vedrete, sono testuali... 

Linguaggio dei Segni 

Partiamo dal difficile e cerchiamo di capire come la maggior parte delle persone 
sorde preferisca usufruire del linguaggio dei segni e che il medesimo differisce 
per ogni Paese del mondo similmente a come differiscono i linguaggi naturali a 
noi noti - per esempio, fra una persona di lingua spagnola ed una di lingua 
giapponese. Una versione accessibile per persone sorde di un’interfaccia digitale 
dovrebbe essere dotata di appositi video realizzati con la lingua dei segni relativa 
al target geografico di pertinenza: se volete vedere un esempio italiano curiosate 
nel vlog (video-blog) realizzato da persone sorde all’indirizzo web 
https://vlogsordi.blogspot.com 



Guardate i video-esempi della traduzione di viaggiare in lingua ucraina e poi in 
lingua svedese tratti da https://www.spreadthesign.com/it.it/search/ 








00 : 00 / 00:00 



(la traduttrice ucraina fa un segno deciamente diverso da quella svedese 
utilizzando la prima addirittura due mani per comporre una tipologia di gesto e 
la seconda solo una...) 

Comunicazione Aumentata e Alternativa 

Continuiamo con esempi poco noti in tema di alternative accessibile, ma proprio 
per questo importanti come lo sono i siti web ed ebook nonché applicazioni di 
Comunicazione Aumentativa e Alternativa particolarmente utili per persone 
con deficit cognitivo come le persone autistiche che sono avvantaggiate da 
semplici informazioni costituite da testo semplice e chiaro accompagnato da 
immagine esplicativa. 

Alternative testuali vere e proprie 





























Molte persone disabili come ad esempio non vedenti, non udenti e persone 
dislessiche possono trarre vantaggio da informazione testuale che sia una valida 
alternativa (equivalente) a ciò che viene percepito come audio, video od 
immagine in alcuni casi grazie anche all’ausilio di screen-reader che possono 
trasformare il testo in informazione percepibile tramite comunicazioni audio o 
braille. 


Immagini 


Le immagini per poter essere correttamente interpretate devono essere associate 
a testo equivalente, ma ove non è possibile è necessario nominarle in maniera 
significativa e/o dotarle di apposito attributo alt che le descrive opportunamente 
nel caso di editing di siti Web oppure usufruire delle opzioni di accessibilità 
nell’editing delle immagini per i social per aggiungere adeguate alternative 
testuali (descriptive alternative text). 

Audio-Video 
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O Analisi pagina O Console D Debugger {} Editor stili » 
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Cerca in HTML 


<img att="autore Enrico Bisenzi" src=" ../imaaes/users/avatar-001. 


Nel caso di audio-video è fortemente consigliabile accompagnare il medesimo 
da una descrizione testuale equivalente, ma se, ad esempio nei video, le linee 
grafiche non consentono di accompagnare l’oggetto multimediale con testo 
equivalente di accompagnamento allora è possibile usufruire di standard quali 
Web Video Text Tracks da applicare tramite opportuno codice di markup di 
sottotitolazione sincronizzata : < v i d e o 


src="video_da_sottotitolare.ogv"><track 
kind="subtitles" src="sottotitoli-it.vtt" srclang="it" 
label="italiano" defaultxtrack kind="subtitles" 
src="sottotitoli-en.vtt" srclang="en" label="english"> 
</video> 


Esempio di : [idstring] [hh : ]mm : ss . msmsms --> 

[hh : ] mm:ss.msmsms [cue settings] Text stringCue-8 
00:00:52.000 --> 00:00:54.000 <v Emo>I don't think so. 
<c.question>You?</c></v>Cue-9 00:00:55.167 --> 
00:00:57.042 <v Proog>I'm Ok.</v> 




Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) il colore del 
vestitino ed audio che hai percepito, le caratteristiche eventuali di inaccessibilità 
dell’interfaccia che hai progettato o in fase di restyling (quali sono e per quali 
disabilità? come pensi si potrebbe risolverle?). 



Selezione ed assemblaggio dei contenuti testuali per 
un'architettura efficiente in ottica di Brand Awareness 

Un’architettura informativa è composta principalmente di parole (anche se il 
visuale preme per conquistare il primato di componentisca principale..) affinché 
funzioni deve essere nominata in maniera efficace ma anche deve essere 
assemblata da parole (come fossero dei mattoncini Lego...) efficaci e soprattutto 
legittimamente utilizzabili a cominciare dal nome stesso che la titola e la rende, 
eventualmente, facilmente trovabile. Soprattutto in ambito digitale le parole che 
possano essere considerate parole abracadabra ovvero efficamente utilizzabili 
per poter approfondire gli argomenti da loro stesse rappresentati attraverso il loro 
utilizzo sui motori di ricerca diventano componenti essenziali ed efficaci per una 
corretta indicizzazione dell’architettura in generale. 

Le parole, poi, allo stesso tempo dei meccanismi di navigazione possono 
essere parole che aumentano l’usabilità di un'interfaccia e quindi parole che 
evolvono dalla loro funzione di contenuto a funzionalità vere e proprie 
agevolando la comprensione e l'utilizzo consapevole di un'interfaccia e la 
navigazione all'interno dell'architettura informativa. 

Nome = Brand 

Quale nome dare alla nostra interfaccia? Sembra un aspetto secondario ed invece 
è una scelta strategica quella dell’assegnare un nome che ovviamente può e deve 
essere un brand ovvero un marchio (deriva dal marchiare a fuoco il bestiame 
che così poteva essere rivendicato come proprietà...) che a sua volta deve 
possedere alcune qualità anche quando traslato nella sua forma di ! logo ovvero 
deve essere... 

Originale 

Bisogna essere originali in termini assoluti o quanto meno rispetto al proprio 
settore di riferimento altrimenti si corre il rischio di non essere facilmente 
reperibili e contattabili tramite ! motori di ricercae social network 
subendo così la concorrenza di competitor già affermati e quindi già visibili. Per 
verificare l’originalità del nome che ci è venuto in mente è possibile usufruire 
dei seguenti servizi di ricerca online: 

https://knowem.com per verificare l'originalità dell’account social equivalente 
(anche se può non essere identico beninteso) al brand ipotizzato; 





https://www.godaddy.com/domains/domain-name-search come uno fra i tanti 
servizi di verifica dell'originalità del dominio Web equivalente (anche se può non 
essere identico beninteso) al brand ipotizzato; 

http://www.wipo.int/branddb/en/ per verificare l’assenza di tutele giuridiche 
rispetto al brand ipotizzato. 




Significativo 

Non è facile capire il valore culturale di un nome ipotizzato e ancor più a livello 
cross-cultural ma uno dei metodi più interessanti è quello di utilizzare il 
CANALE IMMAGINI di motori di ricerca come Google ma anche Bing, 
Yandex, Naver o Baidu per capire a quale immaginario può appartenere la scelta 
di un nome di brand ipotizzato. 


Comprensibile e facilmente comunicabile 


Un brand deve essere comprensibile e facilmente comunicabile in qualsiasi 
modo ed è per questo che è importante controllare anche la sua pronuncia 
fonetica magari attraverso la piattaforma di scambio social delle pronunce 
diffuse in tutto il mondo come https://it.forvo.com/pronounce/ 


OForvo 

All thè words in thè worid. Pronotinced. 


Aggiungi parole 


Pronuncia 
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Pronuncia 


Scegli una lingua per vedere le pronunce in sospeso solo per quella lingua. 


Lingua: 


Scegli la lingua 


+ Aggiungi 
nuove parole 


O dare uno sguardo alle ultime 50 parole aggiunte per la pronuncia. Forse potresti aiutare a 
pronunciarle tu stesso. 


Parole 

o [yue) 

O Telegrafenstange [de] 
O *1(^3) [ja] 

O schismless [en] 


Frasi 

O ZU Felde [de] [Altro] 

O gehen um etwas [de] [Altro] 
O einen Bus kriegen [de] [Altra] 


» Pronunce in 
» Pronunce in 
» Pronunce in 
• Pronunce in 
» Pronunce in 
» Pronunce in 
» Pronunce in 
» Pronunce in 


Tedesco 

Tatarico 

Russo 

Inglese 

Giapponese 

Francese 

Spagnolo 

Portoghese 


Esprimere Identità 

Con i suoi font utilizzati e la sua carica comunicativa iconica deve poter 
trasmettere l’identità di ciò che deve rappresentare a pieno titolo ed in maniera 
efficace. 


Adattivo 

Deve potersi adattare - mantenendo la propria capacità comunicativa - ai diversi 
ambiti (anche dimensionali) in cui essere collocato in un’ottica di filiera 
pubblicitaria ! cross-mediale: in ambito digitale risulta sicuramente 
importante una sua corretta interpretazione all’interno di uno spazio assimilabile 
ad un piccolo quadrato o cerchio essendo spesso questi utilizzati in ambito social 










soprattutto a livello di gestione grafica dei loghi. 

Corredato di eventuale Payoff 

Associabile ad un brand è poi un payoff - ovvero uno slogan come si sarebbe 
detto una volta - che non è altro che una (breve) frase capace di esprimere il 
mood del brand con il quale l’utente deve poter essere invogliato a sintonizzarsi 
spontaneamente. 

Un esempio geniale del passato (anni ‘50-’60) quello della Vespa della Piaggio 
che con la frase CHI VESPA MANGIA LE MELE attirava la curiosità e 
l’attenzione del suo target di età di riferimento più importante - quello 
giovanilistico - legato ad istinti spontaneamente trasgressivi e. quindi, in quegli 
anni, ancora facilmente riconducibili simbolicamente al primo gesto trasgressivo 
dell’essere umano di tradizione culturale cristiana ovvero l’aver colto la mela... 


Google 


chi vespa mangia le mele 


o Q. 


Tutti Immagini Video Shopping Notizie Altro Impostazioni Strumenti 


SafeSearch attivo» 



























Parole = Gergo 

Una volta identificato il target di riferimento è necessario cominciare a capire 
quale può essere il relativo gergo di riferimento ovvero un set di parole che viene 
colloquialmente utilizzato (-gergo) dal medesimo target : il glossario-dizionario 
derivante da uno studio-analisi del genere è fondamentale per poi decidere il 
nome delle componenti dell’interfaccia da sviluppare quali ad esempio: 

• parole e contenuti testuali; 

• voci di menù; 

• nomi di eventuali elementi strutturali (immagini ad esempio). 

In assenza di altre possibilità di indagine o riflessione è possibile utilizzare uno 
strumento come https://trends.google.it/trends/?geo=IT che consente di trovare 
in maniera eventualmente geo-referenziata tendenze, nomi di tendenza e nomi 
simili a quello dell’argomento o della parole sotto osservazione... 


= GoogleTrends 

Italia 


Afghanistan 

Scopri quali ricerche si 

Albania 

fanno nel mondo 

Algeria 

Altre isole americane del Pacifico 

Inserisci un termine di ricerca o un argomento 

Andorra 


Attenzione ai falsi positivi 

Nell’esame delle parole relative o adiacenti (semanticamente) ad una parola data 
è importante fare attenzione all’eventuale emergere di falsi positivi ovvero a 
parole o interpretazioni semantiche apparentemente affini ed utili, ma che, in 
realtà, non appartengono al nostro ambito significativo specifico per cui la parola 
“responsive” può essere utilizzata nel design digitale quanto in ambito politico o 
educativo... 
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il Sentiment 

Studiare la tendenza e l’utilizzo sotto il profilo quantitativo di determinati 
termini può essere utile anche per determinare il sentiment ovvero se un 
determinato argomento o brand viene percepito in maniera positiva o negativa 
associandolo a terminologia con particolari significati positivi o negativi. 
Numeri e tendenze del sentiment possono aiutare a capire il grado e la qualità di 
consapevolezza di un marchio ovvero la cosiddetta brand awareness. 






Contenuti = Repository = Licenze 

Per trovare ispirazioni o veri e propri contenuti riutilizzabili anche liberamente 
ed anche a fini commerciali è possibile fare riferimento alle licenze creative 
commons ed ancor più ad alcuni ! repository di contenuti digitali che 
contengono anche opere che sono riutilizzabili liberamente in quanto protette da 
licenze cosiddette di pubblico dominio o PD in inglese (Public Domain). Uno 
dei repository fra i più interessanti (ma attenzione contiene anche materiale 
coperto da tradizionale copyright...) è https://www.europeana.eu/portal/it dove si 
possono trovare decine di milioni di opere digitali molte delle quali riutilizzabili 
a vario titolo... 



europeana 

collections 
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p Naviga 


term 


Esplora 58,245,986 opere d arte, manufatti, libri, video e suoni provenienti da tutta Europa 


© Public Domain » 


Europeana non è solo un fantastico magazzino di opere digitali messe a 
disposizione da una miriade di istituzioni culturali europee ma anche un’ottima 
palestra per esercitarsi nel comprendere il funzionamento delle licenze Creative 
Commons (CC): queste ultime possono essere utilizzate con piena validità 
giuridica per proteggere o viceversa diffondere i contenuti della propria 
interfaccia o la propria interfaccia nella sua integrità scegliendo fra le seguenti 
opzioni a disposizione su https://creativecommons.org 


• permettere o meno lo sfruttamento commerciale dell’opera 

• permettere o meno la possibilità di modificare l’opera 

• in ogni caso attribuire correttamente l’opera al suo autore citandone 
correttamente il titolo e la licenza di distribuzione assegnatagli 


Una scelta molto diffusa fra i giovani artisti che devono emergere e farsi 








conoscere è quella ad esempio della licenza Attribution-NonCommercial- 
NoDerivatives che oltre all’obbligatoria attribuzione si permette a chiunque di 
distribuire l’opera ma senza poterla modificare e specularci commercialmente... 


Allow adaptations of your work to be shared? 


10! No 


© 

Yes, as long as others share alike 


Allow commercial uses of your work? 

© 

O Yes O No 


© 

Selected License 


Attribution-NonCommercial-NoDerivatives 4.0 International 





Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) brand ed 
eventuale payoff scelto, un elenco di almeno dieci parole che possono essere 
utilizzate efficacemente come componentitstica funzionale rispetto 
all'architettura informativa presa in considerazione, la tipologia di licenza con la 
quale vuoi proteggere o diffondere il prodotto finale. 



Puntare ai risultati: cali to action 


Quel che conta sono dunque i risultati che in gergo vengono dett,e anche 
conversioni: se è una piattaforma che vende, ciò che conta cono i prodotti 
venduti; se è un’interfaccia per aumentare l’audience di riferimento quanti 
contatti si riescono a stabilire; se è un servizio di e-learning quanti studenti 
riescono a passare con successo le verifiche online. Inutile farsi irretire da altre 
metriche o ! analytics - comunque importanti per capire come interagisce 
l’utenza finale - quel che conta è il risultato finale (conversione) all’interno del 
cosiddetto funnel esperenzialel È fondamentale collocare il meccanismo di cali 
to action (bottone di acquisto, form di richiesta contatti eccetera) 
opportunamente nel diagramma di flusso (workflow) e su tutti i nodi funzionali 
di un'interfaccia affinché alla fine di un qualsivoglia esperienza dell’utente finale 
portata avanti con soddisfazione lo stesso utente finale sia messo in condizione 
di convertire e venga quindi chiamato all’azione. 


The Purchase Funnel 



Esempio di funnel esperienzale finalizzato ad un acquisto realizzato da BronHiggs 
(Creative Commons Attribution-Share Alike 4.0) nel quale si ipotizza con chiarezza 
di far prendere consapevolezza all'utente finale, conquistare il suo interesse, 
suscitare desiderio ed infine spingerlo all'azione. 




Visual Design per un'architettura efficiente 

Le linee guida di Google - da grande comunicatore quale esso è - ci offre degli 
spunti molto preziosi in tema di opportunità comunicative anche in merito 
all’ampio panorama di scelte tipo-grafiche che abbiamo a disposizione nella 
costruzione delle componenti della nostra architettura informativa. 

Leggibilità 

È importante realizzare contrasti che consentano al lettore finale di usufruire di 
una buona leggibilità dell’interfaccia nel suo complesso ed in tutte le le sue 
componenti agendo sull’opacità del testo in evidenza e su uno sfondo cromatico 
che consenta un contrasto efficace su qualsiasi schermo e in qualsiasi condizione 
di illuminazione. 



Scelte tipografiche 

In genere viene consigliato un ! font senza grazie maggiormente comprensibile 
a schermo, ma i i font offerti da Google e liberamente utilizzabili sono vari ed 
ognuno in grado di sintonizzarsi ad un certo mood comunicativo: ad esempio per 
esprimere stati d’animo o testimonianze , si può fare riferimento a font con forte 
personalità come gli handwriting. 
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Il vuoto utile 


Fra i tanti non-detti di Google (ma che emerge in maniera evidente in tutti i suoi 
esempi applicativi) vi è l’ampio utilizzo del cosiddetto spazio bianco ovvero di 
ampi spazi lasciati in bianco (vuoti) - detto in gergo spazio bianco ma può essere 
benissimo dello spazio vuoto caratterizzato da altre tonalità cromatica - utilissimi 
per mettere in evidenza degli elementi grafici, tipografici o comunque 
significativamente comunicativi. 

Movimento = Attenzione ? 

Google propone spesso soluzioni che innescano movimenti come occasioni per 
attrarre l’attenzione su determinate aree informative o funzionalità. 



(attenzione vuol dire anche spesso chiamare all'azione ovvero spingere 
all'interazione con l'ultimo elemento oggetto di animazione...) 



l'Immagine è tutto ? 


Se di AUDIO non si parla , il testo deve essere ridotto all’essenziale (ma sarà poi 
vero?) e rispettare precise regole all’insegna della comprensibilità e della 
semplicità e le animazioni attirano l’attenzione, che dire delle immagini? 
L’IMMAGINE è tutto secondo Google e sia essa una illustrazione o una 
fotografia (assegna ad entrambe medesimo valore funzionale-comunicativo) Big 
G è prodigo di utili consigli quali... 

Informativa e non decorativa 

L’immagine deve piacere ed essere gradevole, ma non per questo esteticamente 
fine a sé stessa, ma al contrario sempre portatrice d’informazione utile e 
complementare al testo ai fini della comprensione della comunicazione nel suo 
complesso che vogliamo trasmettere. 



Learn from anywhere 













Non solo informativa, ma dotata di focus informativo 

L’immagine non solo deve essere informativa ma avere un focus informativo: 
una porzione di sé particolarmente significativa che, in caso di 
ridimensionamento in senso ! responsive, possa essere riprodotta in maniera 
utile: dunque una porzione di forma cerchio o quadrato della medesima in cui sia 
contenuto l’elemento maggiormente espressivo e che possa quindi così essere 
rappresentativa su device di tipo diverso una volta opportunamente ritagliata- 
ridimensionata. 






Con capacità di storytelling 

L’immagine deve saper raccontare ovvero deve poter rappresentare una storia o 
far parte di di un racconto perché solo così si può riuscire a colpire l’attenzione e 
l’immaginazione del nostro lettore. 


■ • T 

INGREDIENTE DIRECTIONS 





Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) le tue scelte 
progettuali definitive circa le immagini ed altri eventuali oggetti multimediali 
(audio e video) implementati nel prototipo di architettura in costruzione. 



Tassonomie e metadati in un'ottica di Content 
Strategy ovvero di organizzazione dei contenuti: l'arte 
di categorizzare, etichettare (tag) ed indicizzare a testo 
libero (realizzazioni pratiche) 


Preparatevi a disegnare un albero in cui alla radice vi èìè il nome-titolo-dominio 
del vs. progetto che deve poi ramificarsi via-via secondo categorizzazioni ed 
etichettature sempre più specifiche per poi finire con una marea di foglioline 



Categorie 

Pensate alle categorie come ai livelli più importanti della vostra architettura 
informativa Soprattutto quando si interagisce con piattaforme atte alla 
conservazione, interpretazione e condivisione di contenuti digitali come motori 
di ricerca, data-base, eccetera è assolutamente importante assicurarsi che i nostri 
file conservino i cosiddetti meta-dati capaci di trasportare nel tempo 
informazioni utili su come è stata prodotta l'informazione digitale stessa ed 
alcune informazioni strategiche per poterla descrivere e rappresentare 
efficacemente. 

Categorie = Menù di navigazione ? 

Da tenere presente, come in tante architetture informative, le categorie vengono 
spesse conrtite nelle voci di primo livello del realtivo menù di navigazione. 



Tag (etichette) 

I tag od etichette comunemente utilizzate anche in ambito social sono delle 
possibilità di applicazioni tassonomiche dell'architettura informativa ancor più 
specifica delle categorie essendo una categoria teoricamente identificabile in 
maniera ancor più specifica apponendo alla relativa unità informativa delle tag 
od etichette che la descrivono in maniera più particolareggiata: è comune in 
molte interfacce la rappresentazione delle tag in forma grafica di nuvola in cui le 
dimensioni dei tag più utilizzate sono dimensionalmente maggiori rispetto a 
quelle utimizzate meno frequentemente in maniera tale da offrire un'immediata 
eprcezione all'utente finale degli arogmenti maggiormente trattati e poterci 
accedere immediatamente. 




Parole (meglio se ! Abracadabra) 

Le parole sono l'unità semantica più piccola dei contenuti da noi utilizzabili ed è 
importante che la selezione delle parole afferisca ad un immaginario di risorse 
suggestive ma anche a loro volta utilizzabili per approfondire gli argomenti 
trattati come sonO le ! parole chiave Abracadabra efficacemente riutilizzabili sui motori 
di ricerca per aprire veri e propri tesori informativi inaspettati: la parola che "dà 
vita" in questo caso alle risposte che noi necessitiamo continuamente nella 
nostro quotidianità di ricerche e studi. Allo stesso tempo utilizzare parole 
(chiave) - così come categorie e tag - ben strutturate e significative comporta la 
predisposizione della nostra architettura informativa ad una corretta 
indicizzazione da parte di crawler e bot vari. 



ABRAKADABRA 
ABRAKADABR 
ABRAKADAB 
ABRAKADA 
ABBAKAD 
A B R A K A 
ARRAK 
ABKA 
A B R 
A B 
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Meta-Dati 

Soprattutto quando si interagisce con piattaforme atte alla conservazione, 
interpretazione e condivisione di contenuti digitali come motori di ricerca, data¬ 
base, eccetera è assolutamente importante assicurarsi che i nostri file conservino 
i cosiddetti meta-dati capaci di trasportare nel tempo informazioni utili su come 
è stata prodotta l'informazione digitale stessa ed alcune informazioni strategiche 
per poterla descrivere e rappresentare efficacemente. 
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Verifica 

Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) come pensi di 
applicare meta-dati, etichette e categorie al tuo elaborato eventualmente tramite 
un CMS al sito Web prototipo della vs. architettura informativa. 















Il funel esperienziale ed il concetto di conversioni 
(disegnare meccanismi di successo fra punti di 
ingresso e punti di uscita) 

L'utenza finale, come si dice in gergo, atterra sulla nostra architettura 
informativa proveniendo da fonti fra le più diverse (motori di ricerca, 
passaparola social, azioni di branding, link da altre architetture, eccetera) ed è 
necessario predisporre un'opportuna esperienza di atterraggio dell'utente finale e 
predisporlo immediatamente verso un percorso esperienziale o Iworkflow che si 
concluda con una cosiddetta ! conversione ovvero l'ottenimento di un obiettivo 
(acquisto, richiesta informativa, step di apprendimento, eccetera). Vediamo 
come... 







Percorsi e navigazioni 

Bisogna pensare ad organizzare le voci di menù e P architettura 
dell’informazione più in generale della nostra interfaccia ipotizzando i diversi 
percorsi che un utente finale potrebbe intraprendere per arrivare ad 
un’informazione (od obiettivo-conversione). 

Ad esempio per trovare una canzone posso affidarmi al motore di ricerca interno 
così come indagare sui brani musicali recentemente ascoltati oppure, in maniera 
più sistematica, partire dalle collezioni generali di partenza, per poi scendere 
nelle sotto-categorie come per esempio gli album. 

Menù e chiare opportunità di navigazione 



Il menù cosiddetto hamburger ovvero rappresentato dai famosi tre trattini o 
puntini allineati in verticale è un’ottima e nota opportunità, accolta in maniera 
consapevole da tutta 1‘utenza finale come strumento di navigazione: lo stesso 
utente finale però non è detto che voglia fare lo sforzo di digitare sopra ed è per 
questa ragione che bisogna valutare bene le eventuali voci di menù 
immediatamente visibili così come gli eventuali tab che vengono messi in 
evidenza nella Homepage o da altra ! pagina di atterraggio perché a 
loro è delegata la capacità di comunicare e spiegare all’utente finale dove si 
trova, salvo poi approfondire la navigazione con gli strumenti di navigazione 
interni (menù ad hamburger compreso). 














Pets 


< Q. 


DOGS CATS BIRDS 



Chi cerca trova 

La funzione di ricerca interna è così importante - soprattutto per siti web 
complessi - ai fini di una corretta fruizione di un’interfaccia che, dove non si può 
contare su risorse tecniche interne sufficienti, può essere presa in seria 
considerazione la possibilità di utilizzare una delle varie possibilità offerte dai 
motori di ricerca - tra i quali lo stesso Google c ori https://cse.aooale. it/cse/ - per 
integrare un proprio motore di ricerca interno o custom search engine grazie ad 
un supporto tecnologico esterno. 





























Sitemap & Workflow 


https://www.mockflow.com è un interessante ambiente di sviluppo visuale che 
predispone alla logica di progettazione di architetture informative. È un 
ambiente complesso ma ordinato che anche nel suo piano free offre degli 
strumenti decisamente utili ed in particolare la funzione Sitemap risulta essere lo 
strumento per definire al meglio l’Architettura dell’Informazione ovvero un 
albero concettuale degli elementi di cui è composta un'interfaccia (o un sito Web 
ad esempio) e le relative linee di collegamento. 
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Diretta derivazione della sitemap è quello che MockFlow definisce ! UI flows e 
che in questo testo sono stati definiti workflow : in definitiva si tratta di 
immaginare e quindi predisporre un esperienza utente o UX relativamente ad un 
obiettivo dato in maniera tale che l'utente finale sia indirizzato attraverso meno 
passaggi possibili (canonicamente tre) verso una qualsivoglia conversione. Uno 
















strumento sempre online ma alternativo a mockflow, più moderno (senza 
bisogno di flash) e soprattutto specificatamente rivolto al design di sole Sitemap 
e User Flow è https://app.flowmapp.com . 



Workflow & la User eXperience 

L'architettura informativa può essere ipotizzata secondo varie schematizzazioni 
esponendo linee di collegamento fra funzioni in successioni che possono rendere 
l’idea di quale può essere l’esperienza utente (User eXperience) di un ipotetico 
utente ovvero il suo flusso di utilizzo o workflow. Ovviamente più sono le 
ipotesi di utilizzo differente di una medesima interfaccia e più workflow devono 
essere ipotizzati salvo sottoporli poi a meccanismi di verifica post-produzione 
(vedremo più avanti cosa vuol dire e come si eseguono queste procedure di 
controllo). 



Esempio di Wireframe denominato Time Bank Wireframe - iteration realizzato a cura di Mark Congiusta 
(Attribution 2.0 Generic https://creativecommons.Org/licenses/bv/2.0/) nel quale sono ravvisabili alcuni 
frammenti di workflow relativi a funzionalità specifiche ipotizzate. 

































































































































































Puntare ai risultati: cali to action 


Quel che conta sono dunque i risultati che in gergo vengono denominati anche 
conversioni: se è una piattaforma che vende, ciò che conta cono i prodotti 
venduti; se è un’interfaccia per aumentare l’audience di riferimento quanti 
contatti si riescono a stabilire; se è un servizio di e-learning quanti studenti 
riescono a passare con successo le verifiche online. Inutile farsi irretire da altre 
metriche o ! analytics - comunque importanti per capire come interagisce 
l’utenza finale - quel che conta è il risultato finale (conversione) all’interno del 
cosiddetto funnel esperenzialel È fondamentale collocare il meccanismo di cali 
to action (bottone di acquisto, form di richiesta contatti eccetera) 
opportunamente nel diagramma di flusso (workflow) e su tutti i nodi funzionali 
di un'interfaccia affinché alla fine di un qualsivoglia esperienza dell’utente finale 
portata avanti con soddisfazione lo stesso utente finale sia messo in condizione 
di convertire e venga quindi chiamato all’azione. 


The Purchase Funnel 



Esempio di funnel esperienzale finalizzato ad un acquisto realizzato da BronHiggs 
(Creative Commons Attribution-Share Alike 4.0) nel quale si ipotizza con chiarezza 
di far prendere consapevolezza all'utente finale, conquistare il suo interesse, 
suscitare desiderio ed infine spingerlo all'azione. 




Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer) alcune ipotesi di 
workflow integrate da corrette localizzazioni di funel-esperienziali orientate 
all'ottenimento di opportune conversioni. 



Come monitorare l'esperienza utente su Web ed App 
(strumenti e procedure) 

Pensare dia ver progettato una buona architettura dell'informazione non significa 
di esserci riusciti! La risposta spetta solo all’utenza finale la quale può essere 
interrogata, studiata analiticamente oppure simulata attraverso strumenti 
tecnologici e procedure di analisi. Vediamo come... 

Aspetti quantitativi = Statistiche 

Quale sia l’ambito ed il linguaggio tecnologico di pertinenza della nostra 
interfaccia digitale la prima questione consiste nel cercare di capire quanti sono 
gli utenti che ci visitano periodicamente e per fare questo è opportuno utilizzare 
gli strumenti più sicuri e semplici che possano esistere: in ambito Web è 
sicuramente opportuno implementare statistiche lato server magari attraverso 
software open-source come AWStats . 



Aspetti qualitativi = Analytics 

Quasi sempre si sente la necessità di capire come si sta comportando la nostra 
utenza sul Web dal momento stesso in cui atterra (da dove arriva?) fino 
all’auspicata conversione. 

Che sia ambito Web oppure che siano app o social, sono le Analytics a svelarci 
tutto ciò che potete immaginare del comportamento della vostra utenza. Vediamo 
insieme alcune opportunità tecnologiche molto interessanti. 

Google Analytics 

Google Analytics è la soluzione più celebre al mondo e sicuramente offre visioni 
molto articolate. È in grado di monitorare app e siti Web andando ad evidenziare 
aspetti molto particolareggiati del comportamento dell’utenza finale. Per quanto 
riguarda il Web il procedimento per usufruire dei suoi servizi (similmente alle 
altre Web Analytics) è molto semplice in quanto consiste nel crearsi un account 
ed implementare su tutte le pagine Web da monitorare un apposito (java)script . 

Fra le tantissime visioni utili di Google Analytic,s una spesso disattesa - ma in 
realtà fra le più interessanti - consente di vedere il flusso di utenti che attraversa 
l’interfaccia monitorata ovvero il percorso degli utenti (in % sul totale) lungo 
tutta l’interfaccia fino ad arrivare a conversioni opportunamente indicate (per 
esempio l’acquisto di un prodotto oppure la visione della pagina dei contatti). 


Starting pages Ist Interaction 

4S.7K Mestone, 24K drop-offe 24.6K sessione, 4.72K drop-offe 



Matomo 

Una soluzione particolarmente interessante per le pubbliche amministrazioni, 
essendo una soluzione open-source e permettendo dunque la possibilità di 
installare sul proprio server il software di monitoraggio senza regalare (pensate 
alle esigenze di riservatezza di siti sanitari o militari...) a terze parti report 
dettagliati sulla propria utenza così come succede con le altre Web Analytics che 
funzionano tramite script e trasmissione dati a ! server altrui. 



Dashboard 
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Il potente motore di ricerca russo offre quello che forse è lo strumento più 
performante a livello di Analytics sia per app che per siti Web: è fra i pochissimi 
ad offrire la visione di ! mappe di calore ma soprattutto fra le tante 
caratteristiche innovative vi è quella che consente di ricostruire attraverso video 
denominati session replay il comportamento dell’utenza finale dalla pagina di 
atterraggio alla conclusione della visita o all’ottenimento di un’eventuale 
conversione opportunamente configurata. Strumento innovativo che offre visioni 
all’avanguardia ed utili pur mantenendo una semplicità d’interfaccia invidiabile. 



Ambito Social 

Le Analytics esistono anche per i social: Twitter le chiama proprio Analytics 
mentre Facebook Insights . In entrambi i casi le analytics per i social vanno 
soppesate con cura perché le metriche offerte sono molto illusorie: inutile gioire 
perché decine di migliaia di account hanno visto un nostro annuncio se 
pochissimi poi ci hanno interagito così come prima di festeggiare per la visione 
da parte di tantissime persone di un nostro video bisogna prima verificare che la 
gran parte delle persone non lo abbia abbandonato dopo una manciata di 
secondi! 


Visitors in Real-time 
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Testi di Usabilità 


Un approccio molto serio per valutare come viene usufruita la nostra interfaccia 
è quella di coinvolgere una parte dell’utenza finale ad eseguire task (compiti) 
con obiettivi ben precisi - “cerca di trovare tale informazione” - e farsi 
resocontare - magari attraverso modulistica precompilata - in quanti passaggi e 
con quale tipo di difficoltà è stato raggiunto il risultato. 

Puoi trovare ispirazione dal modulo pre-impostato da it designers Italia 
https://designers.italia.it/kit/usability-test/ 




Feedback, comunque 

I meccanismi di feedback NON vanno necessariamente identificate con le 
call2action ma sono invece tutte quelle opportunità offerte dai meccanismi della 
comunicazione digitale quali: 

• chat; 

• messaggistica di vario tipo (compresa la posta elettronica); 

• forum; 

in cui sia possibile confrontarsi direttamente e senza alcun tipo di filtro con 
l’utenza finale dell’interfaccia realizzata. 

Sono opportunità per certi versi rischiose, vista la maleducazione diffusa online 
che sfiora atteggiamenti ingiustificati di hating vero e proprio, ma sono al tempo 
stesso dei meccanismi preziosi per valutare il proprio operato e ricevere 
segnalazioni sulla qualità del proprio operato. 



Verifica 


Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) come pensi di 
valutare tecnicamente (e con quali procedure) le interazioni sul tuo prototipo dal 
momento in cui sarà utilizzato dal tuo target di riferimento. 



Browser e motori di ricerca come esempi pratici di 
implementazioni di UX ed (A)UX experience 
(simulazioni) 

Browser e Motori di ricerca sono due opportunità tecnologiche che svolgono 
entrambi un'efficace azione di mediazione con l'informazione e la 
comunicazione digitale: i primi a favore di una Architettura informativa (del 
Web) esplorabile tramite accorgimenti adatti ad essere utilizzati da utenza 
umana ed i secondi che svolgono un'opera di riorganzizazione dell'informazione, 
sempre a favore dell'utenza finale umana, ma tramite una complessa e potente 
elaborazione artificiale. In altre parole I browser sono quei software di tipo 
client (come ad esempio Firefox) che interagendo con i server web (come il 
progetto Open Source Apache) ci permettono di visualizzare ed utilizzare il Web 
cosi come lo conosciamo; i motori di ricerca sono interfacce web utilizzabili da 
browser (come ad esempio Google) che ci permettono di semplificare l'accesso 
all'informazione su Web interrogando poderosi basi di dati che ci offrono una 
selezione di informazioni utili in maniera efficacemente ordinata. Ancora, 
browser e motori di ricerca rappresentano in qualche maniera le due facce, una 
umana e l'altra caratterizzata dal funzionamento di automatismi, della ricerca di 
informazione in Rete: mentre i browser sono utilizzati dagli utenti finali (umani) 
per comprendere l'informazione su Web e classificarla magari attraverso 
procedure di Itagging e Ibookmarking, gli spider (anch'essi browser ma 
governati da automatismi e detti anche bot oppure crawler) vengono utili per 
indicizzare ed ordinare opportunamente la Rete di informazioni che si dipana sul 
Web secondo precisi ! algoritmi matematici. Per i browser si può parlare di 
esplorazione e navigazione di dati mentre per i motori di ricerca di attività di 
ricerca, appunto, su specifiche basi dati: la differenza a livello di !UX non è 
banale perché può voler dire subire l'effetto Ifilter bubble sui social ovvero 
essere circondati di relazioni ed informazioni comode e prevedibili sia per 
l'utente che per l'ambiente social che lo ospita così come decidere 
autonomamente - grazie ai motori di ricerca - quale patrimonio informativo a cui 
accedere attraverso l'opportuna Iparola chiave Abracadabra. Il meccanismo 
del filter bubble può incidere non solo a livello individuale nei meccanismi di 
navigazione ma anche a livelli più profondi ed importanti e soprattutto di livello 
collettivo considerando come l'attuale ! narrazione orale di tipo social può 
inficere meccanismi di preservazione della memoria collettiva fino a mettere in 



dubbio asserite verità di tipo storiche (che per essere tali necessitano di processi 
collettivi di maturazione del dibattito sociale). 
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Motori di Ricerca 

Il Web è comunemente inteso come lo spazio informativo e comunicativo 
comunemente indicizzato dai motori di ricerca di utilizzo comune mentre per 
IDeep Web si intende la porzione del Web non indicizzato o non indicizzabile 
dai comuni motori di ricerca essendo necessario un software di sicurezza per 
varcarne la soglia. E' importante rendersi conto se ci si trova davanti ad una 
interfaccia di ricerca che utilizza ! spider, ! database e ! algoritmo di un altro 
motore di ricerca oppure ad un vero e proprio motore di ricerca completo in ogni 
sua parte (tecnologica e grafica) di soluzioni originali. Un motore di ricerca può 
essere rappresentato come una interfaccia alla quale è possibile sottoporre una 
Iquery (ultimamente definite anche come entità sotto un profilo semantico) che 
induce una ricerca in un data base strutturato costituito da informazioni raccolte 
attraverso il lavoro automatizzato di spider (detti anche crawler o bot ): il 
risultato della ricerca viene fornito in maniera ordinata (ranking in inglese) sulla 
base di un algoritmo matematico che tiene di conto delle caratteristiche 
informative del sito Web visitato dallo spider (in primis la quantità e la qualità 
















dei contenuti) ma anche della sua ecologia di collegamenti con gli altri siti Web 
esistenti su Internet (quest'ultima idea del ricercatore italiano Marchiori che, col 
suo hypersearch, ha fatto la fortuna di Google consentendone il sorpasso su 
AltaVista ed altri motori di ricerca affermatisi negli anni '90 come ad esempio 
Yahoo! integrato poi da Bing). E' importante sapere come presentare le 
informazioni ai motori di ricerca in termini di meta-descrizioni ma è altrettanto 
prendere atto che gli algoritmi sono sempre più in grado, attraverso anche 
meccanismi di Ipattern recognition, di intepretare ed addirittura imparare ad 
intepretare (!machine learning) schemi molto complessi di dati ed ancor più se 
hanno grandi moli di dati ovvero !Big Data a disposizione. Ovviamente, per 
facilitare questi meccanismi è necessario rapportarsi a questi veri e propri 
strumenti di ! A.I. sottoponendo informazione - sia essa in forma vocale , visuale 
o scritta - nella maniera più chiara e comprensibile possibile. 
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L'interfaccia grafica è importante per conquistare l'attenzione dell'utente finale 
ma senza impegnarlo esageratamente: pensate alla semplicità dell'interfaccia di 
Google abbinata però all'idea fantastica di modificare il proprio logo in un 
doodle variabile a seconda dell'attualità. La base dati è altrettanto importante 
perchè consta delle informazioni (tante o poche raccolte dagli instancabili 
spider, informazioni magari utili e originali oppure inutilmente duplicate) che 
possiamo interrogare. L'ordinamento dei risultati è forse l'elemento più 
strategico perchè è il meccanismo che ci consente di filtrare e selezionare 
l'informazione che veramente ci interessa rispetto alla query espressa. 

La ! query può essere espressa in maniera diretta - magari conoscendo sintassi e 











opzioni di ricerca - oppure attraverso l'interfaccia di modalità avanzata di ricerca . 
Oltre alla modalità avanzata di ricerca e ai conseguenti comandi di ricerca è utile 
fare conoscenza dei principali canali di ricerca offerti da Google oltre al Web 
generico e in particolare con il canale immagine. 

Esistono molti motori di ricerca nel mondo oltre ai soliti noti Google e Bing che 
dominano il panorama nord-occidentale. Sopratutto ad Oriente c'è un fiorire di 
motori di ricerca che cercano eda a volte riescano a contrastare il predominio di 
Google (assoluto nell'area nord-occidentale) come ad esempio il sud-coreano 
Naver ma soprattutto il gigante Baidu . l'emergente 360Search e i minori soso e 
sogou per la Cina e dintorni e l'emergente Yandex per la aree russofone (in Italia 
per la cronaca esiste il tentativo di motore di ricerca istella così come in Francia 
sis ta portando avanti un motore di ricerca sperimentale molto interessante di 
nome Owant ). 

Vi sono poi ! motori di ricerca speciali ed aggregatori capaci di indicizzare non 
il Web generico ma porzioni specifiche di esso come le immagini, i suoni, i 
video, i blog, eccetera: fra tutti merita citare necessariamente quella fantastica 
raccolta di immagini, testi e suoni del patrimonio culturale auropeo e che 
corrispondi a nome di Europeana . I motori di ricerca sono inoltre sempre più in 
grado di interpretare gli oggetti multimediali per come sono realizzati anche se 
testo (ed alternative testuali) così come i meta-dati rimangano i riferimenti 
principali per una corretta interpretazione ed indicizzazione. Alcuni motori di 
ricerca speciali, ad esempio, sono in grado di realizzare ricerche di immagini 
partendo da una immagine simile a quella che stiamo cercando, altri ancora 
miscelano i risultati raccolti con la posizione geolocalizzata dell'utente che sta 
svolgendo l'interrogazione sul motore di ricerca oppure con le attività di ricerca 
informazione svolta precedentemente. Quando si svolge una ricerca su un 
determinato argomento converrebbe esplicitare la ricerca su più canali 
informativi specifici, non fermandosi solo al Web generico ma indagando 
sull'ambito multimediale - suoni compresi - così come sui libri e documenti 
online, sui bookmark (segnalibri) scambiati fra utenti sull'argomento, sugli 
scambi comunicativi di tipo social a cominciare dai canali cosidetti QA , sulle 
novità dei blog magari estrapolabili tramite feed che ne sintetizzano il contenuto; 
vi possono poi essere delle ricerche con finalità molto specifiche come ad 
esempio quelle necessarie per individuare un nuovo brand ed allora tornano utili 
basi dati etimologiche , collezioni di nomi social e di domini Web nonché 
database di marchi registrati. Altri ancora, molto particolari, consentono di 






















effettuare ricerche molto precise su basi dati scientifiche , consentono di 
suddividere semanticamente gli argomenti in cluster . ricercano fra i meta dati di 
fotografie online (quei dati visualizzabili pubblicamente sulle foto-account di 
Google+ per capirsi...) per individuare macchine fotografiche smarrite o 
derubate, si candidano come piattaforme distribuite su tecnologia basata su 
software libero oppure offrono la possibilità di verificare contenuti 
eventualmente duplicati su altri siti Web. 

Qualsiasi sia il motore di ricerca che ci troviamo di fronte è sempre importante 
andare ad indagare la sua modalità di ladvanced search con i Isearch 
commands e carpire la Vision che lo rappresenta come ad esempio quella 
particolarissima di DuckDuckGo che promette il rispetto della privacy dei propri 
utenti evitando l'adozione di qualsiasi procedura di Itracking così come riflettere 
sulla commistione fra piattaforme social e motori di ricerca come nel caso 
dell' interfaccia avanzata di ricerca di Twitter che presenta delle interessantissime 
modalità di ricerca in ambito social relative anche a topic ed opzioni di 
geolocalizzazione. 

Browser 

1 Ibrowser è uno stmmento essenziale per la navigazione sul Web. Il Web fa 
parte della più ampia rete di comunicazione Internet composta da svariati servizi 
comunicativi caratterizzati tutti da uno specifico protocollo (insieme di regole): 
tutti i servizi comunicativi di Internet vengono erogati da specifici computer 
fornitori di servizi denominati come server interrogati allo scopo da computer 
desiderosi di ricevere il servizio attraverso specifici software che vengono 
denominati client e che cercano il servizio sul server su determinati indirizzi 
specifici noti anche come porte (ecco perchè per la comunicazione Internet si 
parla di modello client-server). Tutti i computer per esistere e comunicare in 
Internet devono essere identificati da un indirizzo detto anche numero IP per 
comodità spesso tradotto in un indirizzo alfabetico (attraverso il noto servizo 
DNS ). Molti servizi internet come ad esempio quello della posta elettronica o del 
trasferimento file (ftp) sono erogati solo attraverso una sessione di 
autenticazione (login) durante la quale sono forniti nome utente e password. 


Il browser è il software client che ottiene (senza autenticazione) dalla porta 80 
del server Web la possibilità di interagire con una pagina Web attraverso il 












protocollo di comunicazione http . Per poter interagire al meglio con una pagina 
Web è molto importante avere piena consapevolezza di ciò che stiamo facendo 
ricordandosi di abilitare l'Iaddress bar del browser, avere accesso a tutti i menù 
e funzionalità interne del browser magari prendendo dimestichezza a tal scopo 
con le scorciatoie da tastiera utili ma la funzione più importante a livello di 
organizzazione dell'infomazione rimane la possibilità di salvare ed 
organizzare Ibookmark (detti anche segnalibri ) ovvero gli indirizzi dei siti Web 
a noi più funzionali per una loro immediata reperibilità e consultazione. E' 
importante ricordare che a seconda dell'interfaccia hardware e software che 
abbiamo a disposizione l'interazione con la pagina web può cambiare 
significativamente: un click destro del mouse, ad esempio, può offrire possibilità 
diverse di interazione rispetto ai diversi movimenti delle dita su un touchscreen a 
cominciare dalle funzionalità Ivisualizza sorgente ed {analizza elemento. 
Assolutamente importante prendere visione del codice sorgente di una pagina 
web: il codice sorgente visualizzabile dal browser è il risultato (output) 
dell'interazione client-server fra browser e server ed è il file di testo dove è 
possibile capire l'origine della struttura, la formattazione e gli script di 
funzionamento di una pagina Web. In sintesi nel file sorgente di una pagina web 
è contenuto il codice di marcatura html che definisce la struttura di una pagina 
web, il linguaggio di editing css che ne determina la formattazione e il 
linguaggio di scripting (javascript) che ne determina il funzionamento in 
relazione ai meccanismi di interazione con l'utente finale della pagina Web: 
salvare una pagina web in locale (file sorgente), modificare il file sorgente e 
verificare l'effetto delle modifiche è una ottima maniera per sperimentare il reale 
funzionamento del Web (esistono allo scopo delle funzionalità insite nel browser 
come analizza elemento). 




E' consigliabile prendere in considerazione i seguenti browser: 

• Firefox per la sua natura Open Source garanzia di interoperabilità e sicurezza; 

• Chrome per la sua ampia offerta di tool di analisi Web; 

• Vivaldi (fork di Opera ) per alcune sue caratteristiche utili di personalizzazione e possibilità di 
evidenziare alcune interessanti proprietà delle immagini ospitate sulle pagine Web. 

Possono essere considerati browser anche quei dispositivi ed app come la 
storica wikitude per il visuale e Shazam per l'audio che ci permettono di 
accedere alla cosiddetta ! realtà aumentataowero alla realtà... aumentata di 
informazioni digitali peraltro perlopiù ricavabili in tempo reale dal Web stesso. 







La realtà aumentata può ricavare informazioni dall'interpretazione di ! QR Code, 
dal nostro geoposizionamento, dalle immagini e dai suoni acquisibili dai nostri 
dispositivi digitali adempiendo ad esigenze comunicative così come di 
reperimento dell'informazione in base alla esperienza del nostro vissuto 
nell'ambiente reale.oprattutto quando si interagisce con piattaforme atte alla 
conservazione, interpretazione e condivisione di contenuti digitali come motori 
di ricerca, data-base, eccetera è assolutamente importante assicurarsi che i nostri 
file conservino i cosiddetti meta-dati capaci di trasportare nel tempo 
informazioni utili su come è stata prodotta l'informazione digitale stessa ed 
alcune informazioni strategiche per poterla descrivere e rappresentare 
efficacemente. 


Verifica 

Scrivi al titolare del corso alla casella postale (email) ebisenzi@yandex.com le 
seguenti informazioni al fine di poter valutare in maniera adeguata la tua 
partecipazione. 

Nome ed email di contatto. 

Descrivi con allegati eventualmente utili (non oltre i 2Mb di grandezza 
altrimenti utilizzi servizi di trasferimento file come WeTransfer ) il risultato 
dettagliato di un tuo approfondimento informativo portato avanti sia visitando di 
link in link una tua risorsa del Web nota sia interrogando sullo stesso argomento 
un motore di ricerca a tua scelta. 




L'architettura 'libro digitale' come esempio cross- 
device di architettura dell'informazione 


L'IeBook e ancor più il formato standard !ePub (3) è un gran bell'esempio di 
come si può tras-migrare un set di linguaggi digitali per confezionare un 
prodotto Icross-device. Mi riferisco all'opportunità offerta dal formato più 
innovativo ePub3 di poter utilizzare i cosiddetti linguaggi del Web per poter 
costruire una complessa architettura informativa come lo è quella di un libro 
elettronico e, fortunatamente, potendo intraprendere una filiera produttiva 
composta, se necessario, da strumenti di sviluppo !Open Source. Vediamo come 
ed a vantaggio di quali fruitori tecnologici finali... 

Una filiera completamente Open Source 

Libre Office 

La suite libera Libre Office è un ottimo software per produrre documenti ben 
formati che possono essere facilmente esportati in PDF oppure in epub come per 
questo stesso testo didattico tramite il plugin writer2xhtml oppure più 
semplicemente con la funzione di default presente di esportazione in epub(3). 
L'epub è un formato standard e quindi correttamente intepretabile dalla maggior 
parte degli leReader ed in ogni caso facilmente utilizzabile per essere convertito 
in formati proprietari che alcuni eReader esigono (gli eReader sono quei 
dispositivi che usufruendo della tecnologia !elnk od lePaper che dir si voglia 
riescono a garantire una lettura ben contrastata similmente alla lettura di carta 
stampata in rpesenza di luce naturale). L'opportunità più interessante espressa da 
LibreOffice da un punto di vista di corretta costruzione di un'architettura 
dell'informazione corretta è quella di utilizzare gli stili come strumenti di 
formattazione in maniera tale che la creazione di indici così come la titolazione 
di paragrafi e capitoli risulta corretta e facilitata da automatisimi. 

LibreOffice inoltre parla correntemente i linguaggi del Web quindi non ha 
difficoltà, ad esempio di acquisire anche con un semplice copia-ed-incolla dei 
contenuti pre-formattati sul Web per poi inserirli nel proprio processo produttivo 
che può includere - previa opportuna configurazione - un'esportazione nel 
formato standard per ebook noto come ePub (e nella sua forma innovativa epub3 
capace di includere, al pari del Web, componenti multimediali ed interattivi). 



è LibreOffice Writer ▼ lun 16:51 it 

biowatching-toscana.odt - LibreOffice Writer 

le Modifica Visualizza Inserisci Formato Stili Tabella Form Strumenti Finestra Aiuto 



Sigil 

L'editor html-css Sigil risulta molto utile per innestare elemeti multimediali 
come immagini, audio o video che risulta essere fra le novità più interessanti del 
formato ePub3 . Da un punto di vista di controllo della corretta struttura formale 
contiene al suo interno alcuni tool utili come la generazione automatica della 
Table ofContents (praticamente l'indice del libro elettronico) e l'update della 
manifest properties (elenco risorse utilizzate). 



Calibre 

Il gestore, editor e convertitore di eBook Calibre consente di svolgere un 
accurato controllo della correttezza formale dell'architettura informativa del 
nostro ebook prodotto sia a livello di validità formale dei linguaggi html e css 
utilizzati, sia, ad esempio dell'eventuale e quindi inopportuna presenza di file 





























multimediali contenuti nell'ePub ma in realtà non elaborati correttamente 
nell'ipermedia realizzato. 
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opportunità complesse di organizzazione 
dell'informazione di un'architettura informativa in 
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ePubCheck 

ePubCheck è uno strumento un attimino tecnico, a volte agevolmente integrato 
in servizi di validazione online, altre volte da utilizzare in maniera più 
impegnativa tramite shell da "riga di comando" su alcuni sistemi operativi come 
Linux : in ogni caso risulta indispensabile per verificare con assoluta certezza la 
validità formale dell'ePub prodotto (aspetto imprescindibile per poter essere 
distribuito su piattaforme online anche commmerciali come Amazon e per poter 
diffonderlo a cuor leggero ad una platea discretamente ampia di dispositivi 
tecnologici che ambiscono ad interpretare questo formato standard ed open 
source). 
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